<template>
	<view class="content">
		<!-- 全屏loading页 -->
		<orange-fullloading :loadshow="loading" text="加载中"></orange-fullloading>
		<!-- 顶部操作区域 -->
		<view class="header">
			<!-- 顶部tab -->
			<view class="tab-wrap">
				<image @click="signHandle" class="sign-in"
					src="https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220803/0d63f279ffeb38d22a7269a14cf9adf8.png"
					mode="aspectFit">
				</image>
				<block v-if="shenheSwitch=='0'">
					<u-tabs-swiper ref="uTabs" :is-scroll="false" :bar-style="barStyle"
						:active-item-style="activeBarStyle" active-color="#fff" inactive-color="#99C5AC" font-size="32"
						bg-color="#338B5B" :list="tabsList" :current="currentTab" @change="tabsChange"></u-tabs-swiper>
				</block>
				<block v-if="shenheSwitch=='1'">
					<u-tabs-swiper ref="uTabs" :is-scroll="false" :bar-style="barStyle"
						:active-item-style="activeBarStyle" active-color="#fff" inactive-color="#99C5AC" font-size="32"
						bg-color="#338B5B" :list="tabsList1" :current="currentTab" @change="tabsChange"></u-tabs-swiper>
				</block>
				<image @click="$tools.to('../../pages_rank/index/index')" class="rank"
					src="https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220803/14dbf4bc3006efc067f5dc1ed2b7740e.png"
					mode="aspectFit"></image>
			</view>
		</view>
		<view class="placeholder-wrap"></view>
		<!-- 列表 -->
		<swiper class="swiper" :style="{height:swiperHeight}" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish" @touchmove.stop>
			<!-- 推荐 -->
			<swiper-item class="swiper-item-1">
				<tuijianXingcheng ref="tuijianXingcheng" :nowXcList="nowXcList" :nowDate="nowDate"
					:searchHeight="searchHeight" :swiperHeight="swiperHeight" @clickCity="cityListShow = true"
					@refreshOrder="getItineraryxc"></tuijianXingcheng>
			</swiper-item>
			<!-- 电台 -->
			<!-- <block v-if="shenheSwitch=='0'">
				<swiper-item class="swiper-item-2">
					<homeRadio ref="homeRadio" :searchHeight="searchHeight" :swiperHeight="swiperHeight"></homeRadio>
				</swiper-item>
			</block> -->
			<!-- 关注 -->
			<swiper-item class="swiper-item swiper-item-3">
				<guanzhu ref="guanzhu" :searchHeight="searchHeight" :swiperHeight="swiperHeight"
					@clickCity="cityListShow = true"></guanzhu>
			</swiper-item>
			<!-- 动态 -->
			<swiper-item class="swiper-item-4">
				<scroll-view class="scroll-view" :style="{height:swiperHeight}" scroll-y @scrolltolower="onreachBottom"
					refresher-background="#338B5B">
					<view class="option-wrap"></view>
					<view class="list-1">
						<u-waterfall v-model="list4" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="item" v-for="(item,i) in leftList" :key="i" @click="goNoteDetail(item.id)">
									<u-lazy-load :image="item.cover"></u-lazy-load>
									<view class="flex-between">
										<view class="title">
											{{item.title}}
										</view>
									</view>
									<view class="flex-between mt-20">
										<view class="flex-between">
											<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
											<view class="name line-clamp">
												{{item.nickname}}
											</view>
										</view>
										<view class="like">
											<image class="icon-34" src="../../static/btn_like.png" mode="widthFix">
											</image>
											<text class="ml-10">{{item.like_num || 0}}</text>
										</view>
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="item" v-for="(item,i) in rightList" :key="i"
									@click="goNoteDetail(item.id)">
									<u-lazy-load :image="item.cover"></u-lazy-load>
									<view class="flex-between">
										<view class="title">
											{{item.title}}
										</view>
									</view>
									<view class="flex-between mt-20">
										<view class="flex-between">
											<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
											<view class="name line-clamp">
												{{item.nickname}}
											</view>
										</view>
										<view class="like">
											<image class="icon-34" src="../../static/btn_like.png" mode="aspectFill">
											</image>
											<text class="ml-10">{{item.like_num || 0}}</text>
										</view>
									</view>
								</view>
							</template>
						</u-waterfall>
						<view class="pb-80">
							<u-loadmore :status="status"></u-loadmore>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 可拖动悬浮按钮 -->
		<drag-button :isDock="true" :existTabBar="true">
			<view class="leida">
				<image @click="$tools.to('/pages_message/safetyCenter/safetyCenter')" class="icon-120"
					src="../../static/btn_safety.png" mode="widthFix"></image>
				<image @click="$tools.to('/pages_message/radar/radar')" class="icon-120"
					src="https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220803/d74251dc88d6372478c83593e4d1ca19.png"
					mode="widthFix"></image>
				<!-- <image @click="$tools.makePhone(ptlxdh)" class="icon-120"
					src="https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220826/2ad4a4dcb2a54dd5b3dd7f26b414da3f.png"
					mode="widthFix"></image> -->
				<image @click="$tools.to('/pages_message/tousu/tousu')" class="icon-120"
					src="https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220827/ad2582ad6c2df967a23509215d78767e.png"
					mode="widthFix"></image>
			</view>
		</drag-button>
		<!-- 签到成功 -->
		<u-popup v-model="signShow" mode="center">
			<view class="sign-popup">
				<view class="title">
					签到成功
				</view>
				<view class="money">
					金币+{{jifen_num}}
				</view>
				<view class="desc">
					每天都能来签到哦！
				</view>
				<view class="btn" @click="signShow = false">
					确定
				</view>
				<view class="mt-80" @click="signShow = false">
					<u-icon name="close-circle" color="#fff" size="50"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="cityListShow" mode="left" height="100%" width="100%">
			<citySelect @back_city="back_city"></citySelect>
		</u-popup>
		<!-- 发布弹窗 -->
		<!-- <u-popup v-model="releasePopupShow" @close="tabbarCurrent=0" mode="bottom">
			<n-release @close="releasePopupShow = false"></n-release>
		</u-popup> -->
		<n-release :openFlag="releasePopupShow" @close="closeRelease"></n-release>
		<!-- 底部导航栏 -->
		<block v-if="shenheSwitch=='0'">
			<u-tabbar v-model="tabbarCurrent" :openFlag="releasePopupShow" :icon-size="48" :hide-tab-bar="true"
				inactive-color="#AAAAAA" :list="tabbarList" :mid-button="true" @change="selectTabbar"></u-tabbar>
		</block>
		<block v-else>
			<u-tabbar v-model="tabbarCurrent" :openFlag="releasePopupShow" :icon-size="48" :hide-tab-bar="true"
				inactive-color="#AAAAAA" :list="tabbarList1" :mid-button="false" @change="selectTabbar1"></u-tabbar>
		</block>

		<!-- 去支付赔偿金 -->
		<block v-if="userInfo.compensation !='0.00' && userInfo">
			<u-modal v-model="czqxsmShow" @confirm="payCompensation" :maskCloseAble="false">
				<view class="p-30">
					<rich-text :nodes="content"></rich-text>
					<view class=" text-center primary size-50 mt-20">
						{{userInfo.compensation || 0}}元
					</view>
				</view>
			</u-modal>
		</block>
		<!-- 热门动态 -->
		<u-popup v-model="dongtaiShow" mode="center" :closeable="true" close-icon="close-circle" border-radius="16"
			close-icon-size="50" close-icon-color="#333" @click="close" @close="close">
			<view class="pop-1">
				<image @click="$tools.to('/pages/noteDetail/noteDetail?id=' + dongtai.id)" :src="dongtai.images"
					mode="aspectFill"></image>
				<view class="title line-clamp" @click="$tools.to('/pages/noteDetail/noteDetail?id=' + dongtai.id)">
					{{dongtai.title}}
				</view>
				<view class="text line-clamp-2 px-30"
					@click="$tools.to('/pages/noteDetail/noteDetail?id=' + dongtai.id)">
					{{dongtai.content}}
				</view>
				<view class="n-btn-primary" @click="confirm">
					发布我的动态
				</view>
			</view>
		</u-popup>
		<!-- 版本更新提示 -->
		<updatePopup></updatePopup>
	</view>
</template>

<script>
	import {
		tabbar
	} from '@/pages/tabbar.js'
	import {
		tabbar1
	} from '@/pages/tabbar1.js'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	var amapFile = require('@/common/amap-wx.130.js')
	import {
		aMapWXkey
	} from '@/config/index.js'
	import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	import dragButton from "@/components/drag-button/drag-button.vue";
	import tuijianXingcheng from '@/components/tuijian-xingcheng/tuijian-xingcheng.vue'
	import guanzhu from '@/components/guanzhu/guanzhu.vue'
	import homeRadio from '@/components/home-radio/home-radio.vue'
	import updatePopup from '@/components/update-popup/update-popup.vue'
	export default {
		components: {
			tuijianXingcheng,
			guanzhu,
			homeRadio,
			dragButton,
			citySelect,
			updatePopup
		},
		data() {
			return {
				dongtai: {},
				dongtaiShow: false,
				czqxsmShow: true,
				content: '',
				cityListShow: false,
				loading: true,
				locationCity: '', //当前所在城市
				tabbarCurrent: 0, //当前tabbar下标
				currentTab: 0, //当前顶部tab下标
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				signShow: false, //	签到弹窗显示
				releasePopupShow: false, //	发布弹窗显示
				swiperHeight: 0, //	swiper高度
				searchHeight: 0, //	搜索栏高度
				stickyFlag: false,
				// 推荐
				currentBadge_1: 1, //当前分类标签下标
				pages_1: 1,
				list1: [], //列表
				// 电台
				currentBadge_2: 1, //当前分类标签下标
				pages_2: 1,
				list2: [], //列表
				// 关注
				currentBadge_3: 1, //当前分类标签下标
				pages_3: 1,
				list3: [], //列表
				// 动态
				currentBadge_4: 1, //当前分类标签下标
				pages_4: 1,
				list4: [], //列表

				tabbarList: tabbar,
				tabbarList1: tabbar1,

				barStyle: {
					width: '22rpx',
					height: '6rpx',
					background: '#FD8E1C',
					borderRadius: '4rpx'
				},
				activeBarStyle: {
					fontSize: '42rpx',
					color: '#fff'
				},
				tabsList: [{
						name: '推荐'
					},
					// {
					// 	name: '电台'
					// },
					{
						name: '关注'
					},
					{
						name: '动态'
					}
				],
				tabsList1: [{
						name: '推荐'
					},
					{
						name: '关注'
					},
					{
						name: '动态'
					}
				],
				tabs: [{
						name: '推荐'
					},
					{
						name: '电台'
					},
					{
						name: '关注'
					},
					{
						name: '动态'
					}
				], //瀑布流列表
				badgeList_2: [{
						name: '猜你喜欢',
						id: 1
					},
					{
						name: '上下班拼车',
						id: 2
					},
					{
						name: '旅游拼车',
						id: 3
					},
					{
						name: '节假日拼车',
						id: 4
					},
					{
						name: '包车',
						id: 5
					},
					{
						name: '租车',
						id: 6
					}
				], //关注标签分类
				badgeList_3: [{
						name: '猜你喜欢',
						id: 1
					},
					{
						name: '线路',
						id: 2
					},
					{
						name: '行程',
						id: 3
					},
					{
						name: '动态',
						id: 4
					},
					{
						name: '用户',
						id: 5
					},
					{
						name: '包车',
						id: 6
					},
					{
						name: '租车',
						id: 7
					}

				], //关注标签分类
				myAmapFun: null,
				triggered: false,
				status: 'loading', //loadmore loading / nomore

				nowXcList: [], //当前进行中行程
				jifen_num: '',
				nowDate: '',
				ptlxdh: '',
			};
		},
		onShow() {
			let tabbarNum = uni.getStorageSync('tabbar') || ''
			if (tabbarNum == 3) {
				this.tabbarCurrent = 1
				this.swiperCurrent = 3
			} else {
				this.tabbarCurrent = 0
			}
			uni.removeStorageSync('tabbar')
			// 获取当前行程
			this.getItineraryxc()
			// 进入页面刷新 动态
			this.onRefresh()
		},
		onHide() {
			this.releasePopupShow = false
		},
		onLoad(e) {
			if (e.scene) {
				uni.setStorageSync('pid', e.scene)
			}
			this.myAmapFun = new amapFile.AMapWX({
				key: aMapWXkey
			});
			this._freshing = false;
			this.getLocation()
			this.getConfig()
			let that = this
			that.tim.on(that.TIM.EVENT.SDK_READY, function(event) {
				if (event.name == 'sdkStateReady') {
					that.getConversationList()
				}
			});
			// 获取推荐 动态
			this.getDongtai()
		},
		onReady() {
			setTimeout(() => {
				this.getElInfo()
			}, 1000)
		},
		onPullDownRefresh() {
			if (this.currentTab === 0) {
				this.$refs.tuijianXingcheng.onRefresh()
			}
			if (this.currentTab === 1) {
				this.$refs.homeRadio.onRefresh()
			}
			if (this.currentTab === 2) {
				this.$refs.guanzhu.onRefresh()
			}
			if (this.currentTab === 3) {
				this.onRefresh()
			}
		},
		computed: {
			...mapState({
				userInfo: (state) => state.user.userInfo,
				shenheSwitch: (state) => state.config.shenheSwitch,
			})
		},
		methods: {
			...mapMutations(['LOCATION_CITY']),
			...mapActions(['getConversationList', 'refreshUserInfo']),
			// 获取推荐 动态
			getDongtai() {
				this.$api.getDt().then(res => {
					if (res.code == 1 && res.data != null) {
						this.dongtai = res.data
						setTimeout(() => {
							this.dongtaiShow = true
						}, 1000)
					}
				})
			},
			getConfig() {
				this.$api.getConfig({
					name: 'czqxsm'
				}).then(res => {
					if (res.code == 1) {
						this.content = res.data
					}
				})
				this.$api.getConfig({
					name: 'qdjf'
				}).then(res => {
					if (res.code == 1) {
						this.jifen_num = res.data
					}
				})
				this.$api.getConfig({
					name: 'ptlxdh'
				}).then(res => {
					if (res.code == 1) {
						this.ptlxdh = res.data
					}
				})
			},
			// 支付赔偿金
			payCompensation() {
				this.$api.compensationPayment().then(orderInfo => {
					if (orderInfo.code == 1) {
						this.$tools.wechatMpPay(orderInfo.data).then(payInfo => {
							if (payInfo.errMsg == 'requestPayment:ok') {
								this.$tools.toast('支付成功')
								this.refreshUserInfo()
							} else {
								this.$tools.toast('支付失败')
							}
						})
					} else {
						this.refreshUserInfo()
					}
				})
			},
			// 获取当前行程
			getItineraryxc() {
				this.$api.itineraryxc().then(res => {
					if (res.code == 1) {
						this.nowXcList = res.data.data
						this.nowDate = Date.parse(new Date()) / 1000;
					}
				})
			},
			back_city(e) {
				console.log(e)
				if (e == undefined) {
					this.cityListShow = false
					return
				}
				if ((typeof e == 'string') && e.constructor == String) {
					this.LOCATION_CITY(e)
					this.cityListShow = false
				} else {
					this.LOCATION_CITY(e.cityName)
					this.cityListShow = false
				}
			},
			// 获取当前位置
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						let latitude = res.latitude
						let longitude = res.longitude
						this.myAmapFun.getRegeo({
							location: `${longitude},${latitude}`,
							success: (res) => {
								console.log('途经点', res)
								this.locationCity = res[0].regeocodeData.addressComponent.city
								this.LOCATION_CITY(this.locationCity)
							}
						})
					}
				})
			},
			// 获取动态列表
			getHomeList_4() {
				this.$api.homeDynamicList({
					page: this.pages_4,
				}).then(res => {
					if (res.code == 1) {
						if (this.pages_4 === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.list4.push(...res.data.data)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// if (this._freshing) return;
				// this._freshing = true;
				// setTimeout(() => {
				// 	this.triggered = false;
				// 	this._freshing = false;
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				this.list4 = []
				this.pages_4 = 1
				this.status = 'loading'
				this.getHomeList_4()
				// }, 500);
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === 'nomore') {
					return
				}
				this.pages_4++
				this.status = 'loading'
				this.getHomeList_4()
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			pageScroll(e) {
				let scrollTop = e.detail.scrollTop
				if (scrollTop > this.searchHeight - 4) {
					this.stickyFlag = true
				} else {
					this.stickyFlag = false
				}
			},
			async getElInfo() {
				uni.getSystemInfo({
					success: resu => {
						console.log(resu)
						let query = uni.createSelectorQuery()
						query.select('.header').boundingClientRect();
						query.exec(res => {
							this.swiperHeight = resu.windowHeight - 50 - res[0].height + 'px';
							console.log('页面的剩余高度', this.swiperHeight);
							setTimeout(() => {
								this.loading = false
							}, 500)
						});
					},
					fail: res => {}
				});
			},
			// 切换tabbar
			closeRelease() {
				if (this.currentTab == 3) {
					this.tabbarCurrent = 1
				} else {
					this.tabbarCurrent = 0
				}
				this.releasePopupShow = false
			},
			selectTabbar1(e) {
				if (!this.userInfo) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('token')
					// #ifdef MP
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/mpLogin/mpLogin'
						})
					}, 1000)
					// #endif

					// #ifndef MP
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}, 1000)
					// #endif
					return
				}
				console.log(this.tabbarList1[e].url)
				console.log(e)
				uni.switchTab({
					url: this.tabbarList1[e].url
				})

			},
			selectTabbar(e) {
				console.log(this.userInfo)
				if (!this.userInfo) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('token')
					// #ifdef MP
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/mpLogin/mpLogin'
						})
					}, 1000)
					// #endif

					// #ifndef MP
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}, 1000)
					// #endif
					return
				}

				console.log(e)
				console.log('this.releasePopupShow', this.releasePopupShow)
				if (e == 2) {
					let is_auth = uni.getStorageSync('userInfo').is_auth
					if (is_auth != 1) {
						uni.showModal({
							title: '温馨提示',
							content: '您还没有实名认证，点击确定完成认证信息',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages_user/realname_authentication/realname_authentication'
									})
								}
							}
						})
						return
					}
					this.tabbarCurrent = 0
					this.releasePopupShow = !this.releasePopupShow
					console.log('!this.releasePopupShow', this.releasePopupShow)
					return
				} else {
					this.tabbarCurrent = 0
					this.releasePopupShow = false
				}
				if (e == 0) {
					this.tabbarCurrent = 0
					this.swiperCurrent = 0
					return
				}
				if (e == 1) {
					this.tabbarCurrent = 3
					this.swiperCurrent = 2
					// this.swiperCurrent = 3
					return
				}
				uni.switchTab({
					url: this.tabbarList[e].url
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				console.log('// tabs通知swiper切换')
				console.log('this.index', index)
				this.swiperCurrent = index;
				if (index === 0) {
					this.$refs.tuijianXingcheng.onRefresh()
				}
				if (index === 1) {
					this.$refs.homeRadio.onRefresh()
				}
				if (index === 2) {
					this.$refs.guanzhu.onRefresh()
				}
				if (index === 3) {
					this.onRefresh()
				}
			},

			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.currentTab = current;
			},

			selectBadge(e) {
				this.currentBadge_1 = e
			},
			// 查看行程详情
			goDetail(id) {
				uni.navigateTo({
					url: '../journey_detail/journey_detail?id=' + id
				})
			},
			goRadio(id) {
				uni.navigateTo({
					url: '/pages_live/radioDetail/radioDetail?id=' + id
				})
			},
			// 查看动态
			goNoteDetail(id) {
				uni.navigateTo({
					url: '../noteDetail/noteDetail?id=' + id
				})
			},
			signHandle() {
				console.log('111')
				this.$api.signQd().then(res => {
					if (res.code == 1) {
						this.signShow = true
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			confirm() {
				uni.navigateTo({
					url: '/pages_release/dongtai/dongtai'
				})
			},
			close() {
				this.dongtaiShow = false
			}
		}
	};
</script>

<style lang="scss">
	/deep/ .u-tabs-item {
		font-weight: 600 !important;
		transition: 200ms;
	}

	/deep/ .u-scroll-bar {
		margin-left: 5px;
	}

	page {
		height: 100vh;
		overflow-y: hidden;
	}

	.content {
		height: 100vh;
		overflow-y: hidden;
	}

	.header {
		background-image: linear-gradient(90deg, #338b5b, #308a57);
		padding: 10rpx 30rpx 0;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */

		right: 0;
		z-index: 100;

		.tab-wrap {
			@include flex-between;

			.sign-in {
				width: 58upx;
				height: 58upx;
			}

			.rank {
				width: 58upx;
				height: 58upx;
			}
		}
	}

	.option-wrap {
		background: #308a57;
		padding: 20upx 30upx 30upx;
	}

	.search-wrap {
		background: url(https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20221008/69527e06102d98f0767d9ab5ca8fb3c2.png) no-repeat;
		height: 72upx;
		background-size: 100% 100%;
		@include flex;

		image {
			width: 34upx;
			margin: 0 10upx 0 20upx;
		}

		.text {
			font-size: 28upx;
			color: #318B59;
			margin-right: 10upx;
		}

		.btn {
			width: 120upx;
			height: 60upx;
			background: #318A59;
			box-shadow: 0px 3upx 6upx rgba(49, 138, 89, 0.2);
			border-radius: 32upx;
			margin-right: 6upx;
			font-size: 30upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
		}
	}

	.badge {
		white-space: nowrap;
		padding: 12px 0 20upx;

		.item {
			display: inline-block;
			line-height: 22px;
			background: rgba(255, 255, 255, .2);
			border-radius: 22upx;
			padding: 0 14upx;
			min-width: 90upx;
			text-align: center;
			font-size: 24upx;
			color: rgba(255, 255, 255, .5);
			// margin: 24upx 14upx 40upx 0;
			margin-right: 14upx;
		}

		.item.cur {
			color: #318A58;
			background: #fff;
		}
	}

	.placeholder-wrap {
		height: 90upx;
	}

	.swiper {
		.scroll-view {
			width: 100%;
		}
	}

	.sticky-wrap {
		height: 46px;
	}

	.swiper-item-1 {
		position: relative;

		.sticky {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			padding: 0 30upx;
			z-index: 10000;
			background: #308a57;
		}
	}

	.swiper-item-3 {
		.placeholder {
			height: 30upx;
			background: #308a57;
		}

		.title-1 {
			font-size: 32upx;
			font-weight: bold;
			color: #999999;
			padding: 30upx 30upx 26upx;
			border-radius: 30upx 30upx 0 0;
			margin-top: -30upx;
			background: #fff;
		}

		.user-list {
			white-space: nowrap;
			padding: 0 20upx;
			border-bottom: 16upx solid #f5f5f5;
			background: #fff;

			.item {
				width: 142upx;
				text-align: center;
				display: inline-block;
				padding-bottom: 30upx;

				.avatar {
					width: 80upx;
					height: 80upx;
					min-height: 80upx;
					border: 1upx solid #519D76;
					border-radius: 50%;
				}
			}
		}
	}

	.swiper-item-4 {
		.like {
			font-size: 20upx;
			font-weight: 400;
			color: #999999;
			@include flex;
		}
	}

	.list-1 {
		// @include flex-between;
		// align-items: flex-start;
		// flex-wrap: wrap;
		padding: 30upx;
		margin-top: -30upx;
		background: #fff;
		border-radius: 30upx 30upx 0 0;

		.item {
			width: 335upx;
			border-radius: 16upx;
			position: relative;
			margin-bottom: 35upx;

			.setting {
				position: absolute;
				left: 0;
				top: 0;
				padding: 10upx;
				@include flex-between;
				width: 100%;

				.date {
					line-height: 40upx;
					background: rgba(255, 142, 28, .8);
					font-size: 28upx;
					color: #FFFFFF;
					padding: 0 12upx;
					border-radius: 4upx;
				}

				.count {
					line-height: 40upx;
					background: rgba(49, 138, 88, 1);
					font-size: 20upx;
					color: #FFFFFF;
					border-radius: 4upx;
					padding: 0 12upx;
					@include flex-between;

					image {
						width: 24upx;
						height: 24upx;
						margin-right: 4upx;
					}
				}
			}

			.pic {
				width: 335upx;
			}

			.title {
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
			}

			.num {
				font-size: 20upx;
				font-weight: 400;
				color: #FF8E1C;
				line-height: 30upx;
				background: #FFFFFF;
				border: 2upx solid #FF8E1C;
				border-radius: 17upx;
				padding: 0 10upx;
				white-space: nowrap;
			}

			.desc {
				font-size: 24upx;
				color: #999999;
				margin: 12upx 0 24upx;
				line-height: 1;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;
			}

			.avatar {
				width: 42upx;
				height: 42upx;
				border-radius: 50%;
			}

			.name {
				font-size: 24upx;
				color: #333333;
				margin-left: 10upx;
				width: 72upx;
				white-space: nowrap;
			}
		}
	}

	.address-card {
		height: 230upx;
		background: #FFFFFF;
		border-radius: 16upx;
		@include flex-center;
		flex-direction: column;

		.input-group {
			@include flex-between;
			margin-bottom: 20upx;
			padding: 0 30upx;
		}

		image {
			width: 52upx;
			margin: 0 20upx;
		}
	}

	.sign-popup {
		background: url(https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220725/84eb88419c0176ae4b7f64c9c28dea45.png) no-repeat;
		background-size: cover;
		width: 750upx;
		height: 926upx;
		text-align: center;

		.title {
			padding-top: 343upx;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
		}

		.money {
			margin-top: 16upx;
			font-size: 42upx;
			font-weight: 600;
			color: #FF0000;
		}

		.desc {
			font-size: 26upx;
			color: #666666;
			margin-top: 25upx;
		}

		.btn {
			width: 400upx;
			line-height: 165upx;
			background: url(https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220725/39c2fd7820ad70ac799841e0e6557893.png);
			background-size: cover;
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			margin: 100upx auto 0;
		}
	}

	.leida {
		display: flex;
		flex-direction: column;
	}

	/deep/ .u-mode-center-box {
		background-color: transparent !important;
	}

	/deep/ .u-drawer-bottom {
		background: transparent !important;
	}

	/deep/ .u-waterfall {
		justify-content: space-between;
	}

	/deep/ .u-column {
		flex: inherit;
	}

	.pop-1 {
		width: 580upx;
		// height: 680upx;
		background: linear-gradient(180deg, #EEFFF6 0%, #FFFFFF 100%);
		box-shadow: 0px 6upx 12upx rgba(153, 153, 153, 0.8);
		text-align: center;
		padding-bottom: 60upx;

		image {
			width: 364upx;
			margin: 92upx auto 0;
			max-height: 360upx;
		}

		.text {
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			margin-top: 10upx;
		}

		.title {
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
		}

		.n-btn-primary {
			margin-top: 74upx;
		}
	}
</style>
